<template>
    <div class="success">
        <el-row type="flex" justify="center" align="middle">
            <el-col :sm="12" :lg="6">
                <el-result :icon="icon" :title="title" :sub-title="subTitle">
                    <template #extra>
                        <slot name="extra"></slot>
                    </template>
                </el-result>
            </el-col>
        </el-row>
    </div>
</template>

<script lang="ts" setup>
import { computed } from 'vue';

const props = defineProps({
    icon: {
        type: String,
        default: 'success'
    }
})
const title = computed(() => {
    switch (props.icon) {
        case 'success':
            return '提交成功'

        case 'error':
            return '提交失败'

        default:
            return '不存在此图标'
    }
})
const subTitle = computed(() => {
    switch (props.icon) {
        case 'success':
            return '提交成功详情'

        case 'error':
            return '提交失败详情'

        default:
            return '不存在此图标'
    }
})
</script>